<template>
    <div>
      <div id="pdfDom" ref="pdfDom" >
        <!-- 工艺流程卡 -->
        <div  v-if="pdfType==='process'">
          <div class="page">
            <div  v-for="(item,index) in arrayList" :key="item.currentPage">
            <!-- 头部 -->
            <div class="page-header" v-if="index==0">
              <el-row type="flex" class="row-bg">
                <el-col :span="8"></el-col>
                <el-col :span="8"><div class="codeImage text-center"><img :src="codeImage" alt=""></div></el-col>
                <el-col :span="8"><div class="text-right align-bottom fz-8">第{{item.currentPage}}页 共 {{totalPages}} 页</div></el-col>
              </el-row>
              <el-row type="flex" class="row-bg">
                <el-col :span="8"><div class="logoImage"><img :src="logoImage" alt=""></div></el-col>
                <el-col :span="8"><div class="title text-center align-bottom">零件工艺流程卡</div></el-col>
                <el-col :span="8"><div class="text-right align-bottom fz-8">QR05-005</div></el-col>
              </el-row>
            </div>
            <table class="myTable"  v-if="index==0">
              <tr>
                <th>部件名称/型号</th>
                <th>产品/零件图号</th>
                <th>产品/零件名称</th>
                <th>原材料牌号/名称</th>
                <th>毛坯尺寸/规格</th>
              </tr>
              <tr class="text-center">
                <td class="padding10"></td>
                <td class="padding10">{{contentObj.drawCode}}</td>
                <td class="padding10">{{contentObj.drawName}}</td>
                <td class="padding10">{{contentObj.drawMaterialName}}</td>
                <td class="padding10" >{{contentObj.size}}</td>
              </tr>
            </table>
            <!-- 表头 -->
            <table class="myTable" v-if="index==0">
              <tr>
                <th rowspan="2" class="width20">工序号</th>
                <th rowspan="2" class="width60">工序名称</th>
                <th rowspan="2" >工序内容</th>
                <th rowspan="2" class="width120">设备工装</th>
                <th colspan="2">工时</th>
              </tr>
              <tr>
                <th class="width40">估工</th>
                <th class="width40">准备</th>
              </tr>
            </table>
            <!-- 表格 -->
            <table  class="myTable" ref="contentRef">
              <tr v-for="(itemTd,index) in item.dataList" :key="index" >
                <td rowspan="2" v-if="itemTd.no" class="width20 text-center" :data-height="itemTd.height?itemTd.height:'0'">{{itemTd.no}}</td>
                <td class="text-center width60">{{itemTd.name}}</td>
                <td><div v-html="itemTd.content"></div></td>
                <td class="text-center width120">{{itemTd.gz}}</td>
                <td class="text-center width40" >{{itemTd.predictWorkTime}}</td>
                <td class="text-center width40">{{itemTd.confirmWorkTime}}</td>
              </tr>
            </table> 
            <div class="text-right" v-if="index==(arrayList.length-1)">
                <div class="text-left"> 打印人:{{username}} </div><br>
                <div class="text-left" > 打印时间:{{new Date().getFullYear()}}年{{new Date().getMonth()+1}}月{{new Date().getDate()}}日 </div> 
            </div>
            </div>
          </div>
        </div>
        <!--质量跟踪卡  -->
        <div  v-if="pdfType==='quality'" class="page page1">
          <!--标题 -->
            <div class="page-topContent">
              <el-row type="flex" class="row-bg">
                <el-col :span="8"></el-col>
                <el-col :span="8"><div class="codeImage text-center"><img :src="codeImage" alt=""></div></el-col>
                <el-col :span="8" class="float:right">
                  <div   >
                   <table> 
                      <tr>
                         <td  style="white-space:pre">          </td>
                     </tr>
                      
                     <tr>
                         <td  style="white-space:pre">             图纸编号:{{contentObj.drawCode}}</td>
                     </tr>
                     <tr>
                         <td style="white-space:pre">             材料:{{contentObj.drawMaterialName}}</td>
                     </tr>
                     <tr>
                         <td style="white-space:pre">             尺寸:{{contentObj.size}}</td>
                     </tr>
                     <tr>
                         <td style="white-space:pre">             签收时间:{{contentObj.signDate}}</td>
                     </tr>
                   </table>
                  </div>
                 </el-col>
              </el-row>
              <el-row type="flex">
                <el-col :span="8"><div class="logoImage"><img :src="logoImage" alt=""></div></el-col>
                <el-col :span="8"><div class="title text-center align-bottom">质 量 跟 踪 卡</div></el-col>
                <el-col :span="8"></el-col>
              </el-row>
              <el-row type="flex" class="lineH-2">
                <el-col :span="8"><span class="fz-8">生产令号：</span><span class="fw-bold ">{{contentObj.makeNo}}</span></el-col>
                <el-col :span="8"></el-col>
                <el-col :span="8"><div class="fz-8 text-right">QR01-010C</div></el-col>
              </el-row>
            </div>
            <!--  -->
            <div>
              <!-- 头部 -->
              <table border="1" cellspacing="0" cellpadding="0" bordercolor="#000000" class="myTable">
                  <tr>
                    <th colspan="2"  width="10%">计划节点</th>
                    <th colspan="3" class="fw-normal"  width="30%" v-text="timestampToTime(contentObj.wbPlanFinsihDate,'yyyy.mm.dd')"></th>
                    <th colspan="3" width="25%">生产数量</th>
                    <th colspan="3"  class="fw-normal" width="35%">{{contentObj.nums}}</th>
                  </tr>
                  <tr>
                    <th colspan="2">零件名称</th>
                    <th colspan="3"  class="fw-normal">{{contentObj.drawName}}</th>
                    <th colspan="3">打印人/打印时间</th>
                    <th colspan="3"  class="fw-normal">{{username}}/{{new Date().getFullYear()}}年{{new Date().getMonth()+1}}月{{new Date().getDate()}}日</th>
                  </tr>
                  <tr>
                    <th colspan="2">零件图号</th>
                    <th colspan="3"  class="fw-normal">{{contentObj.drawCode}}</th>
                    <th colspan="3">工艺更改单号</th>
                    <th colspan="3"  class="fw-normal"></th>
                  </tr>
                  <tr>
                    <th class="width30">工序号</th>
                    <th>工序名称</th>
                    <th>本序定额</th> 
                    <th>设备型号编号</th> 
                    <th>工装名称/编号</th> 
                    <th class="width20">量具编号</th> 
                    <th class="width40">操作者（日期）</th>
                    <th class="width20">提交检验数量</th>
                    <th class="width20">检验员（日期）</th>
                    <th class="width5">合格数量 </th>
                    <th class="width20">首检</th>
                  </tr>
                  <tr v-for="item in contentObj.planTaskProcesses" :key="item.no">
                    <td class="width30 text-center">{{item.no}}</td>
                    <td class="text-center">{{item.nameName}}</td>
                    <td>{{item.predictWorkTimeTotal}}</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="width30"></td>
                    <td class="width5"></td>
                    <td class="width20"></td>
                   
                  </tr>
                  <tr> 
                    <td class="width40">出现问题及解决措施</td>
                    <td colspan="10"></td>
                  </tr>
                </table>
            </div>
        </div>
        <!--原材料备料单 -->
      <div  v-if="pdfType==='material'"  >
         <div style="width:900px;height:130px ;">
          <div style="position:absolute; top:20px;left:30px;"  ><img :src="logoImage" alt="" style="width:130px;height:50px"></div>
          <div style=" position:absolute; top:20px;left:350px; font-size:200%" >原材料备料单</div>
           <div style="position:absolute;  top:80px; left:40px; text-align:center; font-size:15"  >No</div>
            <div style="position:absolute;  top:80px; right:20px; text-align:center; font-size:15"  >QR04-003</div>
           <div style="position:absolute;  top:100px; left:30px; text-align:center; font-size:15"  >制表人:{{username}}</div>
           <div style="position:absolute;  top:100px; left:250px; text-align:center; font-size:15"  >{{new Date().getFullYear()}}年{{new Date().getMonth()+1}}月{{new Date().getDate()}}日</div>

         </div>
          <div style="width:900px;height:270px ;">
            <table  border="1px solid #ccc" cellspacing="0" cellpadding="0" style="position:absolute;  left:15px; right:20px">
              <tr style="height:0px;width:850px;">
                <th style="width:50px"></th>
                <th style="width:50px"></th>
                <th style="width:100px"></th>
                <th style="width:100px"></th>
                <th style="width:100px"></th>
                <th style="width:150px"></th>
                <th style="width:100px"></th>
                <th style="width:100px"></th>
                <th style="width:100px"></th>
              <tr>

              <tr style="height:47px;width:850px">
                <td colspan="2" style="width:100px;text-align:center;">生产令号</td>
                <td colspan="2" style="width:200px;text-align:center;">{{contentObj.makeNo}}</td>
                <td style="width:100px;text-align:center;">零件数量</td>
                <td style="width:150px;text-align:center;">{{contentObj.nums}}</td>
                <td style="width:100px;text-align:center;">材料牌号</td>
                <td colspan="2" style="width:200px;text-align:center;">{{contentObj.drawMaterialName}}</td>
              </tr>
              <tr style="height:47px;width:850px">
                <td colspan="2" style="width:100px;text-align:center;">零件图号</td>
                <td colspan="2" style="width:200px;text-align:center;">{{contentObj.drawCode}}</td>
                <td rowspan="2" style="width:100px;text-align:center;">毛坯尺寸</td>
                <td rowspan="2" colspan="2" style="width:75px;text-align:center;">{{contentObj.size}}</td>
                 <td rowspan="2" style="width:100px;text-align:center;">毛坯重量(Kg)</td>
                 <td rowspan="2" style="width:100px;text-align:center;"></td>
              </tr>
              <tr style="height:47px;width:850px">
                <td colspan="2" style="width:100px;text-align:center;">零件名称</td>
                <td colspan="2" style="width:200px;text-align:center;">{{contentObj.drawName}}</td>
              </tr>
             <tr style="height:47px;width:850px">
                <td colspan="2" style="width:100px;text-align:center;">下料</td>
                <td style="width:100px;"></td> 
                <td  colspan="2" style="width:200px;text-align:center;">20____年__月__日</td> 
                <td style="width:150px;text-align:center;">库管员</td>
               <td style="width:100px;text-align:center;"></td>
                <td colspan="2" style="width:200px;text-align:center;">20____年__月__日</td> 
              </tr> 
             <tr style="height:47px;width:850px">
                <td colspan="2" style="width:100px;text-align:center;">审核</td>
                <td style="width:100px;"></td> 
                <td  colspan="2" style="width:200px;text-align:center;">20____年__月__日</td> 
                <td style="width:150px;text-align:center;">检验</td>
               <td style="width:100px;text-align:center;"></td>
                <td colspan="2" style="width:200px;text-align:center;">20____年__月__日</td> 
              </tr> 
              <tr style="height:60px;width:850px">
                <td  style="width:50px;text-align:center;">备注</td>
                <td colspan="8"></td>
              </tr> 
              
            </table>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
import logoImage from "images/logo.png"
import materielApi from 'plugins/axios/materielApi.js';

export default {
    name:'process-flow-card',
    props:{
      pdfType:{
        type:String
      }
    },
    data(){
        return {
          username:localStorage.getItem('ms_username'),
          logoImage,
          codeImage:'',
          contentObj:{},
          arrayList:[],
          processHeader:'',
          pageContentHeight:'809',/**每一页内容的高度 */
          totalPages:1/***总页数 */
        }
    },

    methods:{
        getCgPdfData(id){
            let self = this;
            let nowDate = new Date();
            let total=0;
            self.arrayList=[];
             materielApi.getCode(id).then(res=>{
              self.codeImage=res.content;
            })
            materielApi.printProcess(id).then(res=>{
              debugger;
              let sumHeight = 0;
              self.totalPages = 1;
              
              if(self.pdfType==='process'){
                self.contentObj.makeNo=res.content.makeNo,
                self.contentObj.drawCode=res.content.drawCode,
                self.contentObj.drawName=res.content.drawName
                let obj=[];
                self.arrayList=[{
                  currentPage:1,
                  dataList:[]
                }]
               res.content.planTaskProcesses.forEach((item,index)=>{
                  let paging=false;
                 let divHtml = document.createElement('div');
                 divHtml.innerHTML =item.content+item.checkContent;
                  let f = document.body.appendChild(divHtml);
                  f.setAttribute('style', 'font-size:10px;');
                  let height = f.clientHeight;
                  f.parentNode.removeChild(f);
                  sumHeight+=height;
                  if(sumHeight/self.pageContentHeight>self.totalPages){
                    self.totalPages++;
                    paging=true;
                    self.arrayList.push({
                      currentPage:self.totalPages,
                      dataList:[
                        {
                        paging,
                        height,
                        currentPage:self.totalPages,
                        no:item.no,
                        name:item.nameName,
                        content:item.content,
                        gz:item.gz,
                        predictWorkTime:item.predictWorkTime,
                        confirmWorkTime:item.confirmWorkTime
                      },{
                        name:'检',
                        content:item.checkContent,
                        gz:item.checkGz,
                        predictWorkTime:item.checkPredictWorkTime,
                        confirmWorkTime:item.checkConfirmWorkTime
                      }]
                    })
                  }else{
                    paging=false;
                    self.arrayList[self.arrayList.length-1].dataList = self.arrayList[self.arrayList.length-1].dataList.concat([
                      {
                        paging,
                        height,
                        currentPage:self.totalPages,
                        no:item.no,
                        name:item.nameName,
                        content:item.content,
                        gz:item.gz,
                        predictWorkTime:item.predictWorkTime,
                        confirmWorkTime:item.confirmWorkTime
                      },
                      {
                        name:'检',
                        content:item.checkContent,
                        gz:item.checkGz,
                        predictWorkTime:item.checkPredictWorkTime,
                        confirmWorkTime:item.checkConfirmWorkTime
                      }
                    ])
                  }
                })
               console.log(self.arrayList);
              }else{
                if(res.content.planTaskProcesses.length<18){
                  for(let i =res.content.planTaskProcesses.length-1;i<18;i++){
                    res.content.planTaskProcesses.push({
                      no:i+1,
                      nameName:''
                    })
                  } 
                }
                self.contentObj = res.content;
                console.log(res.content.planTaskProcesses);
              } 
              debugger;
               if(self.pdfType==='material'){
                   self.contentObj.makeNo=res.content.makeNo,
                    self.contentObj.drawCode=res.content.drawCode,
                    self.contentObj.drawName=res.content.drawName
                    let obj=[];
                    self.arrayList=[{
                      currentPage:1,
                      dataList:[]
                }]
               }

debugger;
               self.contentObj.drawMaterialName=res.content.draw.drawMaterialName
                 let  drawLength= res.content.draw.drawLength?res.content.draw.drawLength+"mm":""
                 let  drawWide=res.content.draw.drawWide?res.content.draw.drawWide+"mm":""
                 let drawHigh= res.content.draw.drawHigh?res.content.draw.drawHigh+"mm":""
              if(res.content.draw.type==='1'){
                    self.contentObj.size=drawLength+drawWide+drawHigh
                } else if(res.content.draw.type==='2'){
                  self.contentObj.size="￠"+ "直径"+drawWide+"高"+drawHigh
                } else{
                    self.contentObj.size= drawLength+drawWide+drawHigh
                }
                console.log(self.contentObj.size);
                console.log(self.contentObj.drawMaterialName);
                //遍历数组  判断一下是空或者是undefined
                  if(self.contentObj.planTaskProcesses !=null &&self.contentObj.planTaskProcesses!=undefined){
                       self.contentObj.planTaskProcesses.forEach(item=>{
                        let total=item.predictWorkTimeTotal*self.contentObj.nums+item.wbPrice
                        if(!isNaN(total)){
                            item.predictWorkTimeTotal= self.roundFun(total,2);
                        }
                      })
                  }
               
                  let drawNo=  self.contentObj.drawNo;
                if(drawNo!==null){
                   self.contentObj.makeNo=  self.contentObj.makeNo+"-"+drawNo
                }
                
             setTimeout(()=>{
                    self.$print(self.$refs.pdfDom);
             },100) 
            })          
        },
        //四舍五入，保留位数为roundDigit
       roundFun(numberRound,roundDigit)  {
              if (numberRound>=0){
                  var tempNumber = parseInt((numberRound * Math.pow(10,roundDigit)+0.5))/Math.pow(10,roundDigit);
                  return tempNumber;
               }else {
                  numberRound1=-numberRound
                  var tempNumber = parseInt((numberRound1 * Math.pow(10,roundDigit)+0.5))/Math.pow(10,roundDigit);
                  return -tempNumber;
              }
         },
  
    }
}
</script>
<style scoped>


.page{
  max-width: 1090px;
  min-width: 794px;
  padding:28px 28px;
  box-sizing: border-box;
  font-size: 10px;
  height:1090px;
  margin-bottom:48px;
}
.page1{
  height: auto;
}
.page:last-child{
   margin-bottom:0px;
}
.page .fz-8{
  font-size: 8px;
}
.page .padding10{
  padding:10px;
  box-sizing: border-box;
}
.page .fw-bold{
  font-weight:500;
}
.page .fw-normal{
 font-weight: normal;
}
.page .lineH-2{
  line-height: 2;
}
.page .border-bottom{
 border-bottom: 1px solid #333;
}
.page .width5{
  width: 5px;
}
.page .width10{
  width: 10px;
}
.page .width20{
  width: 20px;
}
.page .width40{
  width: 40px;
}
.page .width30{
  width: 30px;
}
.page .width60{
 width: 60px;
}

.page .width120{
  width: 120px;
}
.page img{
  line-height: 1;
  height: 100%;
}
.page  .title{
  font-size:18px;
}
.page .codeImage{
  height:80px;
}
.page  .logoImage{
  height:40px;
}
.page .myTable{
  width:100%;
}
.page .myTable th{
  font-weight: 600;
}
.page .myTable td,.page .myTable th{
  border:1px solid #000;
  font-size: 14.5px;
  
}

</style>
<style type="text/css" media="print">
@page {
  size: auto;
  margin: 0mm;
}
.always {
  page-break-after: always;
}
</style>